<template>
  <div class="MyOrder">
    <van-list
      v-model="dataList[active].loading"
      :finished="dataList[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs v-model="active" sticky color="#D4B066">
        <van-tab title="全部">
          <OrderItem
            :orderList="dataList[active].list"
            @get-data="getNewData"
          />
        </van-tab>
        <van-tab title="待支付">
          <OrderItem
            :orderList="dataList[active].list"
            @get-data="getNewData"
          />
        </van-tab>
        <van-tab title="待发货">
          <OrderItem
            :orderList="dataList[active].list"
            @get-data="getNewData"
          />
        </van-tab>
        <van-tab title="待收货">
          <OrderItem
            :orderList="dataList[active].list"
            @get-data="getNewData"
          />
        </van-tab>
        <van-tab title="已完成">
          <OrderItem
            :orderList="dataList[active].list"
            @get-data="getNewData"
          />
        </van-tab>
      </van-tabs>
    </van-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Tab, Tabs, List } from "vant";
import OrderItem from "@/components/OrderItem.vue";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);

@Component({
  components: {
    OrderItem,
  },
})
export default class MyOrder extends Vue {
  private active: number = 0;
  private dataList = [
    {
      form: {
        page: 1,
        size: 20,
        status: -1,
        qrStatus: -1,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        status: 0,
        qrStatus: -1,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        status: 1,
        typ: 3,
        qrStatus: -1,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        status: 2,
        typ: 3,
        qrStatus: -1,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        status: 3,
        qrStatus: -1,
      },
      loading: false,
      finished: false,
      list: [],
    },
  ];
  private loading: boolean = false;
  private finished: boolean = false;
  private created(): void {
    this.active = Number(this.$route.params.id);
    this.$common.setWxConfig(window.location.href);
  }
  private onLoad(): void {
    this.$common.getAuthToken(this.getData);
  }
  private getNewData() {
    this.dataList[this.active].form.page = 1;
    this.dataList[this.active].list = [];
    this.getData();
  }
  private getData() {
    this.$post(`userOrderList`, this.dataList[this.active].form).then(
      (res: any) => {
        if (res.code == 0) {
          this.dataList[this.active].loading = false;
          this.dataList[this.active].list = this.dataList[
            this.active
          ].list.concat(res.data.list);
          this.dataList[this.active].form.page += 1;
          if (res.data.list.length < 20) {
            this.dataList[this.active].finished = true;
          }
        }
      }
    );
  }
}
</script>